<template>
    <div class="addressManage">
       <!-- 头部 -->
       <div class="nav_top d-flex jc-between ai-center bg-white">
        <div class="pr-3 mr-3"> 
          <el-button type="text" @click="backDefaultAddress">
            <div class="iconfont icon-back ml-2 fs-xxxl text-dark"></div>
          </el-button>
        </div>
        <div class="fs-xxl text-dark pl-3 ml-3">
          收货地址
        </div>
        <div>
          <el-button type="text" @click="$router.push('/addAddress')">
            <div class="mr-2 fs-xxl text-dark">新建地址</div>
          </el-button>
        </div>
      </div>
       <!-- 地址列表 -->
       <div class="px-2 pt-2 text-grey">常用地址</div>
       <div class="addressList">
          <div class="address_item bg-white px-2  py-3 my-2" v-for="(item,i) in dataList" :key="i">
            <!-- 上部分 -->
            <div class="top_address" style="height: 70px;" @click="use(i)">
              <div class="py-2 fs-xl"><span class="pr-3">{{item.contact}}</span><span>{{item.phone}}</span></div>
              <div>{{item.address}} {{item.detail}}</div>
            </div>
            <!-- 下部分 -->
            <div class="d-flex jc-between pt-2 ai-center">
              <el-checkbox v-model="item.isDefault== '1'? true : false" @change="setDefault(item.id)"><span v-if="item.isDefault">当前默认地址</span><span v-if="!item.isDefault">使用该地址</span></el-checkbox>
              <div class="d-flex">
                <div class="text-grey iconfont icon-jishiben pr-3" @click="edit(item.id)"> 编辑</div>
                <div class="text-grey" @click="delAddress(item.id)">删除</div>
              </div>
            </div>
          </div>
       </div>
       <div v-if="dataList.length<1?true:false" class="bg-white text-c" style="height: 250px;">
        <div class="none">
          <div class="iconfont pb-3">
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-dizhi"></use>
            </svg>
          </div>
          <div class="text-grey">您还没有设置地址~</div>
        </div>

      </div>
    </div>
</template>

<script>
import {Toast, MessageBox} from 'mint-ui';
export default {
  name: "addressManage",
  data() {
    return {
      dataList: [],
      oldVal: ''      
    };
  },
  watch: {
      //监听路由地址  如果地址为家目录 则隐藏返回按钮
      '$route.path' :function (oldVal,newVal) {
        // body...
        if (this.oldVal == '/addAddress') {
           this.oldVal = '';
        }
         if (this.oldVal == '/order') {
          this.oldVal = oldVal;
        }
        
      }
    },
  methods: {
    async getAddressList(){
      this.$store.commit('showLoading')
      const res = await this.$http.get(`user/findAddressList.do`);

        if (res.status == 200) {
          this.$store.commit('hideLoading')
          this.dataList = res.data
        }else {
          Toast('网络异常')
        }
         
    },
    //点击返回返回当前默认地址
    backDefaultAddress(){
      this.$store.commit('deleteAddress')
            if (this.$store.getters.orderAffirm == null){
                this.$router.push('/user')
            }else {
               this.$router.push('/order')
            }

    },
    use(i){
      
      if (this.$store.getters.orderAffirm != null) {
        this.$router.push({
        path: '/order',
        query: {
          addressObj: JSON.stringify(this.dataList[i])
        }
      })
      }
      
    },
    //设置为默认地址   方法一
    async setDefault(i){
      const res = await this.$http.get(`user/updateDefaultAddress.do?id=${i}`)
      
        this.getAddressList()
        Toast('修改成功');
     
      
      // const dataList = this.dataList;
      // dataList.forEach((item, index) => {
      //   item.isDefault = index == i;
      // });
      // //把修改好的数据 传给后台修改  替换位置
      // dataList.splice(0, 0, ...dataList.splice(i, 1));
      //保存到后台
      // const res = await this.$http.post('',this.dataList);
      
    },

    delAddress(id) {
      MessageBox.confirm("确定要删除？").then(
        action => {
          this.$http.get(`user/deleteAddress.do?id=${id}`).then(res => {
            if (res.status == 200) {
              this.getAddressList()
              Toast('删除成功！')
            }else {
              Toast('网络异常！')
            }
            
          })

        },
        () => {}
        );
    },
    edit(id){
      this.$store.commit('saveCurrentAddressId',id);
      this.$router.push('/addAddress/'+id)
    }
  },
  created() {
    console.log(this.$store.getters.orderAffirm)
    this.getAddressList()
    // let jwt = this.$store.getters.jwt;
    // if (jwt) {
    //   this.pageLoad();
    // } else {
    //   this.$router.push("login");
    // }
  },
     mounted() {   //在页面创建之前设置body的背景色
      document.querySelector('body').setAttribute('style', 'background:#f1f3f4')
     }, 
    beforeDestroy() {   //在页面销毁之前移除body的属性，目的是设置的颜色只对当前页面有效
      document.querySelector('body').removeAttribute('style')
    }, 
};
</script>

<style lang="scss" scoped>
.nav_top {
  position: sticky;
  top: 0;
  z-index: 99;
}
.top_address {
  border-bottom: 1px solid #dbdde0;
}
.none {
  padding-top: 50px;
}
.icon {
  font-size: 4.5rem;
}
</style>

